export interface IModuleItem {
  url: string;
  id: string;
  cover: string;
  name: string;
  type: 'grid' | 'row';
  authorName?: string;
  publishTimeStr?: string;
  description?: string;
  index?: number; // 序号
  readCount?: number;
  likeCount?: number;
}
export default class ModuleItem {
  [x: string]: any;
  constructor(data: IModuleItem) {
    this.data = data;
  }
  render(): string[] {
    if ('grid' === this.data.type) {
      return this.renderGrid();
    } else {
      return this.renderRow();
    }
  }
  renderRow(): string[] {
    const html = [];
    html.push(`<div class="module-row-item module-row-item-${this.data.index % 2 === 0 ? 'even' : 'odd'}">`);
    html.push(`<a href="${this.data.url}" class="module-item">`);
    html.push(`   <div class="module-item-image">`);
    html.push(`     <img class="lazy-image" data-src="${this.data.cover}" />`);
    html.push(`   </div>`);
    html.push(`   <div class="module-item-info">`);
    html.push(`     <div class="module-item-name ellipsis2">${this.data.name}</div>`);
    html.push(`     <div class="module-item-desc ellipsis3">${this.data.description}</div>`);
    html.push(`   </div>`);
    html.push(`</a>`);
    html.push(`</div>`);
    return html;
  }
  renderGrid(): string[] {
    const html = [];
    html.push(`<div class="module-grid-item module-grid-item-${this.data.index % 2 === 0 ? 'even' : 'odd'}">`);
    html.push(`<a href="${this.data.url}" class="module-item">`);
    html.push(`   <div class="module-item-inner">`);
    html.push(`     <img class="lazy-image" data-src="${this.data.cover}" />`);
    html.push(`   </div>`);
    html.push(`   <div class="module-item-title">`);
    html.push(`     <p class="ellipsis2">${this.data.name}</p>`);
    html.push(`   </div>`);
    html.push(`</a>`);
    html.push(`</div>`);
    return html;
  }
  renderLazyImage(): string[] {
    const html = [];

    return html;
  }
}
